<template>
	<view class="p-[20rpx] stores">
		<view class="px-[20rpx]  bg-[#fff] rounded-[20rpx]">
			<view class="flex justify-between borderbototm  items-center">
				<view class="flex items-center py-[34rpx]">
					<view class="pr-[60rpx]  types">
						收货地址
					</view>
					<view class="flex-1 typess line-clamp-2">
						{{addresslist.address}}
					</view>
				</view>

				<view @click="goMap()" class="w-[40rpx] h-[38rpx] relative top-[2rpx]">
					<image class="w-[40rpx] h-[40rpx]" src="@/static/order/rightarrow.svg"></image>
				</view>
			</view>
			<view class="oneboder">
				
			</view>
			<view class="flex justify-between h-[106rpx] items-center  borderbototm">
				<view class="flex">
					<view class="pr-[60rpx] types ">
						门牌号码
					</view>
					<view class="flex-1 typess">
						<up-input border="none" placeholder="填写详细地址  例:1层2室" v-model="addresslist.doorNum"></up-input>
					</view>
				</view>
			</view>
			<view class="oneboder">
				
			</view>
			<view class="flex justify-between h-[106rpx] items-center  borderbototm">
				<view class="flex">
					<view class="pr-[60rpx] types">
						<text decode>标签&ensp;&ensp;&ensp;&ensp;</text>
					</view>
					<view class="flex ">
						<view @click="select(item,index)" class="mr-[20rpx]" v-for="(item,index) in biaoqian.list" :key="index">
							<view class="home" :class="addresslist.lable == item.type ? 'home1' : ''">{{item.name}}</view>
						</view>

					</view>
				</view>


			</view>
			<view class="oneboder">
				
			</view>
			<view class="flex justify-between h-[106rpx] items-center  borderbototm">
				<view class="flex">
					<view class="pr-[60rpx] types">
						<text decode>联系人&ensp;&ensp;</text>
					</view>
					<view class="flex-1 typess">
						<up-input border="none" placeholder="请输入联系人" v-model="addresslist.realName"></up-input>
					</view>
					<view @click="changeIndex(item,index)" class="" v-for="(item,index) in sexList.list" :key="index">
						<view class="flex items-center mr-[20rpx]">
							<view class="w-[32rpx] h-[32rpx] rounded-[50%] flex justify-center items-center border border-[#DBDBDB]" :class="addresslist.sex == item.type?'border-[#FE861C]':'border-[#DBDBDB]'">
								<view :class="addresslist.sex == item.type ? ' bg-[#FE861C]' : ''"
									class="w-[20rpx] h-[20rpx]  rounded-[50%] ">
								</view>
							</view>
							<view class="ml-[10rpx] text-[28rpx]">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="oneboder">
				
			</view>
			<view class="flex justify-between h-[106rpx] items-center">
				<view class="flex">
					<view class="pr-[60rpx] types">
						手机号码
					</view>
					<view class="flex-1 typess">
						<up-input placeholder="请输入手机号码" :placeholderStyle="{color: 'red',fontweight:100}" v-model="addresslist.phone" border="none"
							type="number"></up-input>
					</view>
				</view>


			</view>

		</view>
		<view class="h-[calc(var(--bottom-button-height)+5px)]"></view>
		<view class="my-0 py-[20rpx] px-[20rpx] w-full fixed left-0 bottom-[20rpx] box-border bg-[#F7F6FA]">
			<up-button @click="sendAddress()" :customStyle="{borderRadius:'20rpx',height:'98rpx',fontSize:'16px'}" color="#FE861C"
				style="border-radius: 20px;">
				保存地址
			</up-button>
			<view @click="delAddress()" class="mt-[20rpx]">
				<up-button :customStyle="{borderRadius:'20rpx',height:'98rpx',fontSize:'16px'}">
					删除地址
				</up-button>
			</view>

		</view>
		<u-modal :show="showModal" :title="Modaltitle" :content='Modalcontent' :showCancelButton='true'
			@confirm='confirm()' @cancel='cancel()'></u-modal>
	</view>
</template>

<script setup>
	import {
		addressDiteils,
		editaddress,
		addressdel
	} from '@/api/my.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	let id = ref()
	onLoad((e) => {
		id.value = e.id
		getAddreddDetails()
	})
	onShow(() => {

	})
	let showModal = ref(false)
	let Modaltitle = ref('删除')
	let Modalcontent = ref('确定要删除吗？')
	let delAddress = () => {
		// console.log("tuichu");
		showModal.value = true

	}
	let cancel = () => {
		showModal.value = false
	}
	let confirm = () => {
		uni.showLoading({
			title: '正在删除'
		});

		addressdel({
			id: id.value
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				showModal.value = false
				uni.navigateBack()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				showModal.value = false
			}
		})
	}
	//获取当前地址详情

	let getAddreddDetails = () => {
		addressDiteils({
			id: id.value
		}).then(res => {
			if (res.code == 200) {
				addresslist.value = res.result
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
	let addresslist = ref({
	
	})
	let biaoqian = reactive({
		list: [{
				type: 1,
				name: '家',
				index: 0
			},
			{
				type: 2,
				name: '公司',
				index: 1
			},
			{
				type: 3,
				name: '学校',
				index: 2
			}
		]
	})

	let sexList = reactive({
		list: [{
				type: 1,
				name: '先生',
				index: 0
			},
			{
				type: 2,
				name: '女士',
				index: 1
			}
		]
	})
	let select = (item, index) => {
	 if (addresslist.value.lable == item.type) {
	 	addresslist.value.lable = ""
	 } else {
	 	addresslist.value.lable=item.type
	 }
	}
	let changees = ref()
	let changeesss = ref()
	let changeIndex = (item, index) => {
		addresslist.value.sex=item.type
	}
	//保存地址
	let sendAddress = () => {
		let data = {
			address: addresslist.value.address,
			doorNum: addresslist.value.doorNum,
			lable:addresslist.value.lable,
			phone: addresslist.value.phone,
			realName: addresslist.value.realName,
			sex:addresslist.value.sex,
			id: id.value,
			lng: addresslist.value.lng,
			lat: addresslist.value.lat
		}
		editaddress(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.navigateBack()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
	let goMap = () => {
		uni.chooseLocation({
			success: res => {
				console.log("res", res);
				if (!res.name || !res.address || !res.latitude || !res.longitude) return

				// addresslist.doorNum=res.name,
				addresslist.value.address = res.name,
					addresslist.value.lat = res.latitude,
					addresslist.value.lng = res.longitude

				// this.latitude = res.latitude
				// this.longitude = res.longitude
				// this.addressInfo = addressObj
			}
		});
	}
</script>

<style lang="scss">
	::v-deep .u-input__content__field-wrapper__field{
		font-weight: normal !important;
	}
	.stores {
		--bottom-button-height: 60px;
	}

	.types {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #1A1B1C;
		display: flex;
		align-items: center;
	}

	.typess {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;

	}

	.home {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		background: #fff;
		// border: 1rpx solid #DBDBDB;
		width: 110rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		border-radius: 5rpx;
		box-shadow: 0 0 0 0.5px #efefef;
	}

	.home1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
		background: #FE861C;
		width: 110rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		border-radius: 5rpx;
		border: none;
	}

	.borderbototm {
		// border-bottom: 1px solid #efefef;
	}
	.oneboder{
			   border-bottom: 1px solid #efefef;
			   transform: scaleY(.5);
	}
</style>